<script lang="ts">
import {defineComponent} from 'vue'
import DialogAndBlock from "@/components/DialogAndBlock/index.vue";
import {FileResult} from "@/entityType/FileResult";
import fileReq from "@/api/file";
import {FileUtils} from "@/utils/FileUtils";

export default defineComponent({
  name: "FileInfoDialog",
  components: {DialogAndBlock},
  data() {
    return {
      fileInfo: {} as FileResult,
    }
  },
  methods: {
    open(basePath) {
      this.$refs.DialogRef.open()
      fileReq.getFileInfo(basePath).then(res => {
        this.fileInfo = res.data as FileResult
      })
    },
    showSize() {
      return FileUtils.formatFileSize(this.fileInfo.size)
    }
  }
})
</script>

<template>
  <DialogAndBlock
    ref="DialogRef"
    :title="fileInfo.fileName"
  >
    <div class="fileInfoAttr">
      文件创建时间：{{ fileInfo.createTime }}
    </div>
    <div class="fileInfoAttr">
      文件最后更新时间：{{ fileInfo.lastUpdateTime }}
    </div>
    <div class="fileInfoAttr">
      文件大小：{{ showSize() }}
    </div>
    <div class="fileInfoAttr">
      文件路径：{{ fileInfo.path }}
    </div>
    <template v-if="fileInfo.directory">
      <div class="fileInfoAttr">
        文件夹数量：{{ fileInfo.dirCount }}
      </div>
      <div class="fileInfoAttr">
        文件数量：{{ fileInfo.fileCount }}
      </div>
    </template>

  </DialogAndBlock>
</template>

<style scoped lang="scss">
.fileInfoAttr {
  line-height: 18px;
  font-size: 14px;
}
</style>
